import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import request from '../../../http';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const cPassword = () => {
  //获取当前用户名
  const account = sessionStorage.getItem('account');

  //点击提交修改密码接口
  const onFinish = (value: any) => {
    //获取表单输入的信息
    console.log('value的值');
    console.log(value);
    const parms = {
      //...value,//更新value里面的值
      //定义请求参数
      //获取新密码请求参数
      //password: '1',
      password: value.password,
      account: account,
    };
    console.log('请求参数parms的值');
    console.log(parms);
    //调接口
    request.post('/passwordChange/teacher/ChangePasswordTeacher', parms).then(
      (result: any) => {
        //console.log(result);
        // 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
        // config: {url: "请求的地址"}，这是一个配置文件
        // headers: 请求头信息
        // data: (100) 返回响应的数据
        // request: ajax相关的请求信息
        // status: 200；响应状态
        // statusText: "OK"
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log('修改密码成功');

          if (result.code === 20000) {
            // 修改密码成功
            alert(result.message);
          }
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <div style={{ width: '800px', marginLeft: '60px', marginTop: '30px' }}>
        <Form
          {...layout}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="当前密码："
            name="dqmm"
            rules={[{ required: true, message: '请输入' }]}
          >
            <Input.Password placeholder="请输入" />
          </Form.Item>

          <Form.Item
            label="新密码:"
            name="password"
            rules={[
              {
                required: true,
                message: '6~16个字符，建议使用英文字母加数字或符号的混合密码',
              },
            ]}
          >
            <Input.Password placeholder="6~16个字符，建议使用英文字母加数字或符号的混合密码" />
          </Form.Item>

          <Form.Item
            label="请再次确认密码:"
            name="qrmm"
            rules={[{ required: true, message: '请输入' }]}
          >
            <Input.Password placeholder="请输入" />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <div style={{ float: 'left', width: '50px', marginLeft: '5px' }}>
              <Button type="primary" htmlType="submit">
                确认提交
              </Button>
            </div>
            <div style={{ float: 'left', width: '50px', marginLeft: '50px' }}>
              <Button type="default" htmlType="submit">
                取消
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default cPassword;
